<jsp:directive.page contentType="text/html;charset=utf-8" />
<%@ include file="/taglibs.jsp"%>


<head>
<%@ include file="/WEB-INF/jsps/includes/jqgrid.jsp"%>
</head>


<body>



<h1 id="testHeading">BookBank Person Manager</h1>
<a href="${ctx}/person/new">Create a new person</a>
|
<a href="${ctx}/person/1">View</a>
|
<a href="${ctx}/person/1!edit">Edit</a>
|
<a href="${ctx}/person/1!delete">Delete</a>


<div id="topic-grid"></div>
<table id="list2"></table>

<div id="pager2"></div>




<script type="text/javascript">
$(document).ready(function(){
	var lastsel; 
	jQuery("#list2").jqGrid( {
		url : 'person!jsonList.action',
		prmNames : {
			page : "jq.requestPage", rows : "jq.pageSize", sort : "jq.sortColumn",
			order : "jq.sortDirection", search : "jq._search", nd : "jq.nd", npage : null},
		jsonReader : {
			root : "list", repeatitems : false, id : "0"},
		search : {
			sField : 'jq.searchField',
			sOper : 'jq.searchOper',
			sValue : 'jq.searchString'},
		datatype : "json",
		colNames : [ 'id', 'firstName', 'lastName', 'isDelete', 'createDate' ],
		colModel : [ {name : 'id',index : 'id',width : 55},
		     		 {name : 'firstName',	index : 'firstName', width : 90},
		     		 {name : 'lastName',index : 'lastName asc, invdate',width : 100},
		     		 {name : 'isDelete',index : 'isDelete',width : 150},
		     		 {name : 'createDate',index : 'createDate',width : 200} ],
		rowNum : 10,
		rowList : [ 10, 20, 30 ],
		height: 'auto',
		pager : '#pager2',
		sortname : 'id',
		viewrecords : true,
		onSelectRow: function(id){
				if(id && id!==lastsel){
					
					jQuery('#list2').jqGrid('restoreRow',lastsel);
					jQuery('#list2').jqGrid('editRow',id,true);
					lastsel=id; } }, 
		editurl: "person!create.action", 
		sortorder : "asc",
		caption : "bookbankonline.com person list"
	});
	<%-- --%>
	jQuery("#list2").jqGrid('navGrid', '#pager2', {edit:true, add:true, del:true});
});

</script>


</body>
